<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>购物车</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link type="text/css" rel="stylesheet" href="statics/css/style.css" />
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

<script type="text/javascript" src="/EasyBuy/statics/js/jquery-1.8.2.min.js"></script>

<script type="text/javascript" src="/EasyBuy/statics/js/menu.js"></script>

<script type="text/javascript" src="/EasyBuy/statics/js/n_nav.js"></script>

<script type="text/javascript" src="/EasyBuy/statics/js/num.js">
	var jq = jQuery.noConflict();
</script>

<script type="text/javascript" src="/EasyBuy/statics/js/shade.js"></script>

</head>

<body>
	<!-- 头部 -->


	<c:if test="${list1==null }">
		<%
			request.getRequestDispatcher(
						"../../IndexServlet?opr=type&hre=BuyCar").forward(
						request, response);
		%>
	</c:if>
	<%@ include file="../../common/header.jsp"%>
	<%@ include file="../../common/preHeader.jsp"%>

	<!--End Menu End-->
	<div class="i_bg">
		<div class="content mar_20">
			<img src="/EasyBuy/statics/images/img1.jpg" />
		</div>

		<!--Begin 第一步：查看购物车 Begin -->
		<div class="content mar_20">
			<table border="0" class="car_tab"
				style="width:1200px; margin-bottom:50px;" cellspacing="0"
				cellpadding="0" id="qwe">
				<tr>
					<td class="car_th" width="300"><div style="float: left;"><input type="checkbox" id="allChecks">&nbsp;&nbsp;全选</div>商品名称</td>
					<td class="car_th" width="140">单价</td>
					<td class="car_th" width="150">购买数量</td>
					<td class="car_th" width="130">小计</td>
					<td class="car_th" width="140">返还积分</td>
					<td class="car_th" width="150">操作</td>
				</tr>
				
				
				<tr height="70">
					<td colspan="6"
						style="font-family:'Microsoft YaHei'; border-bottom:0;"><label
						class="r_rad"> </label><input type="button" class="r_txt" value="清空购物车 " id="emptyf"> <span
						class="fr">商品总价：<b class='total' style="font-size:22px; color:#ff4e00;">￥2899</b>
					</span></td>
				</tr>
				<tr valign="top" height="150">
					<td colspan="6" align="right"><a href="/EasyBuy/pre/Index.jsp"><img
							src="/EasyBuy/statics/images/buy1.gif" /> </a>&nbsp; &nbsp; <a
						class="settlement"><img src="/EasyBuy/statics/images/buy2.gif" /> </a></td>
				</tr>
			</table>

		</div>

		<!--Begin 弹出层-删除商品 Begin-->
		<div id="fade" class="black_overlay"></div>
		<div id="MyDiv" class="white_content">
			<div class="white_d">
				<div class="notice_t">
					<span class="fr" style="margin-top:10px; cursor:pointer;"
						onclick="CloseDiv('MyDiv','fade')"><img
						src="/EasyBuy/statics/images/close.gif" /> </span>
				</div>
				<div class="notice_c">

					<table border="0" align="center" style="font-size:16px;"
						cellspacing="0" cellpadding="0">
						<tr valign="top">
							<td>您确定要把该商品移除购物车吗？</td>
						</tr>
						<tr height="50" valign="bottom">
							<td><a class="b_sure">确定</a><a class="b_buy">取消</a>
							</td>
						</tr>
					</table>

				</div>
			</div>
		</div>

	</div>
	<%@ include file="../../common/footer.jsp"%>

	<script type="text/javascript" src="/EasyBuy/statics/js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript">
	//<td><input type='checkbox' class='qx' name='qx'></td>
		$(document).ready(function(){
			var sum = 0;		//总价格
			
			//alert("${applicationScope.id}");		//弹出用户id
			//加载购物车商品
			function swz(){
				$(".leftNav").hide();		//全部分类3级菜单隐藏
				$(".total").text("￥0");
				$.getJSON("/EasyBuy/BuyCarServlet","opr=list&userId=${applicationScope.id}",function(data){
					for(var i = 0;i<data.list.length;i++){
						var s = data.list[i];//商品的信息
						var w = data.list1[i];//商品的数量
						var xj = s.price*w.productnum;	//小计
						var jf = (parseFloat(s.price)/10)*w.productnum;	//积分
						if(((i+1)%2)==0){
							$("#qwe tr:eq(0)").after("<tr title='"+s.id+"' class='car_tr' id='commodity_"+i+"'><td><input type='checkbox' class='qx' style='float: left; margin-right: 20px; margin-top: 28px;' name='qx'><div class='c_s_img'><img src='/EasyBuy/statics/images/"+s.fileName+"' width='73' height='73' /></div> "+s.name+"</td><td align='center'>"+s.price+"</td><td align='center'><div class='c_num'><input type='button' value='' onclick='jianUpdate1(jq(this));' class='car_btn_1' /> <input type='text' value='"+w.productnum+"' name='' class='car_ipt' /> <input type='button' value='' id='"+s.id+"' onclick='addUpdate1(jq(this));' class='car_btn_2' /></div></td><td align='center' class='price' name='price' style='color:#ff4e00;'>￥"+xj+"</td><td align='center'>"+jf.toFixed(2)+"R</td><td align='center'><a onclick='ShowDiv(MyDiv,fade)' class='dele' id='dele_"+s.id+"'> 删除</a>&nbsp;<a class='collect' id='col_"+s.id+"'>加入收藏</a></td></tr>");
						}else{
							$("#qwe tr:eq(0)").after("<tr title='"+s.id+"' id='commodity_"+i+"'><td><input type='checkbox' class='qx' style='float: left; margin-right: 20px; margin-top: 28px;' name='qx'><div class='c_s_img'><img src='/EasyBuy/statics/images/"+s.fileName+"' width='73' height='73' /></div> "+s.name+"</td><td align='center'>"+s.price+"</td><td align='center'><div class='c_num'><input type='button' value='' onclick='jianUpdate1(jq(this));' class='car_btn_1' /> <input type='text' value='"+w.productnum+"' name='' class='car_ipt' /> <input type='button' value='' id='"+s.id+"' onclick='addUpdate1(jq(this));' class='car_btn_2' /></div></td><td align='center' class='price' name='price' style='color:#ff4e00;'>￥"+xj+"</td><td align='center'>"+jf.toFixed(2)+"R</td><td align='center'><a onclick='ShowDiv(MyDiv,fade)' class='dele' id='dele_"+s.id+"'> 删除</a>&nbsp;<a class='collect' id='col_"+s.id+"'>加入收藏</a></td></tr>");
						}
					}
					$(".car_btn_1").click(function(){		//点击减号
						//console.log($(this).next().next()[0]);
						if($(this).next().next().attr("disabled")){
							$(this).next().next().removeAttr("disabled");
						}
						$.get("/EasyBuy/BuyCarServlet","opr=upstock&userId=${applicationScope.id}&productId="+$(this).next().next().get(0).id+"&productnum="+$(this).next().val(),function(data){
							//修改数据库中的商品数量
						});
						change(this);		//计算积分和小计
						single();
					});
					$(".car_btn_2").click(function(){		//点击加号
						var p = $(this).prev().val();
						var q = $(this);
						$.get("/EasyBuy/BuyCarServlet","opr=stock&productId="+this.id,function(data){
							if(data == parseFloat(p)){
								q.attr("disabled","disabled");
							}
						});
						$.get("/EasyBuy/BuyCarServlet","opr=upstock&userId=${applicationScope.id}&productId="+this.id+"&productnum="+p,function(data){
							//修改数据库中的商品数量
						});
						change(this);		//计算积分和小计
						single();
					});
					
					$(".dele").click(function(){	//点击删除
						var h = this.id.substring(this.id.lastIndexOf("dele_")+5);	//分割dele_符号
						$(".white_d").attr("id",h);
						var f = $(this).parent().parent().attr("id").substring($(this).parent().parent().attr("id").lastIndexOf("commodity_")+10);	//分割commodity_符号
						$(".notice_t").attr("id","s_"+f);
					});
					
					$(".collect").click(function(){		//点击收藏
						var h = this.id.substring(this.id.lastIndexOf("col_")+4);	//分割col_符号
						$.get("/EasyBuy/BuyCarServlet","opr=collection&userId=${applicationScope.id}&productId="+h,function(data){
							if(data == -1){
								alert("我的收藏里已有该商品!");
							}else if(data == 1){
								alert("该商品已添加到我的收藏!");
							}
						});
					});
					$(".car_ipt").keyup(function(){		//文本框输入  键盘释放事件
						var v = $(this);
						if(isNaN(v.val()) || v.val() == "" || parseFloat(v.val()) == 0){
							v.val(1);
						}else{
							$.get("/EasyBuy/BuyCarServlet","opr=stock&productId="+v.next().get(0).id,function(data){
								if(parseFloat(v.val()) > data){
									v.next().attr("disabled","disabled");
									v.val(data);
								}else if(parseFloat(v.val()) == data){
									v.next().attr("disabled","disabled");
								}else if(parseFloat(v.val()) < data){
									if(v.next().attr("disabled")){
										v.next().removeAttr("disabled");
									}
								}
								change(v);
								//$.get("/EasyBuy/BuyCarServlet","opr=upstock&userId=2&productId="+$(this).next().next().get(0).id+"&productnum="+$(this).val(),function(data){		//死值
									//修改数据库中的商品数量 	不能用
								//});
							});
						}
					});
					$(".car_ipt").blur(function(){
						single(); //计算单个价格
					});
					
					$(".qx").click(function(){
						single(); //计算单个价格
					});
				});
				
			}
			swz();
			
			$("#emptyf").click(function(){		//清空购物车
				for(var i = 0;i<$(".qx").length;i++){
					if($(".qx:eq("+i+")").attr("checked")){
						var productId = $(".qx:eq("+i+")").parent().parent().attr("title");
						$.get("/EasyBuy/BuyCarServlet","opr=dele&userId=${applicationScope.id}&productId="+productId,function(data){
							
						});
					}
				}
				location.href="/EasyBuy/pre/settlement/BuyCar.jsp";
			});
			
			function change(s){		//计算积分和小计
				console.log($(s).val());
				var num = $(s).parent().find(".car_ipt").val();	//数量
				var price = $(s).parent().parent().prev().text();	//单价
				var xj = num*price;
				$(s).parent().parent().next().text("￥"+xj+"");		//小计
				var dgjf = (parseFloat(price)/10)*num;
				$(s).parent().parent().next().next().text(dgjf.toFixed(2)+"R");		//积分
				//count();	//计算总价格
			}
			
			function single(){		//计算单个价格
				sum = 0;
				var unitprice = 0;
				for(var i = 0;i<$(".qx").length;i++){
					if($(".qx:eq("+i+")").attr("checked")){
						unitprice = $(".qx:eq("+i+")").parent().parent().find("td:eq(3)").text();
						var h = unitprice.substring(unitprice.lastIndexOf("￥")+1);	//分割￥符号
						sum = parseFloat(sum) + parseFloat(h);
					}
				}
				$(".total").text("￥"+sum+"");
			}
			
			function count(){	//计算总价格
				sum = 0;
				var prices=document.getElementsByName("price");
				for(var i=0; i<prices.length;i++){
					var h = prices[i].innerHTML.substring(prices[i].innerHTML.lastIndexOf("￥")+1);	//分割￥符号
       				sum = parseFloat(sum)+parseFloat(h);
    			}
    			$(".total").text("￥"+sum+"");
			}
			
			$("#allChecks").click(function(){		//点击全选按钮
				var all=document.getElementById("allChecks");//获取到点击全选的那个复选框的id
        		var one=document.getElementsByName("qx");//获取到复选框的名称
        		if(all.checked==true){//因为获得的是数组，所以要循环 为每一个checked赋值
            		for(var i=0;i<one.length;i++){
                		one[i].checked=true;
                		count();
            		}
        		}else{
            		for(var j=0;j<one.length;j++){
                		one[j].checked=false;
                		$(".total").text("￥0");
            		}
        		}
			});
			
			//删除商品点击确定
			$(".b_sure").click(function(){
				$.get("/EasyBuy/BuyCarServlet","opr=dele&userId=${applicationScope.id}&productId="+$(".white_d").get(0).id,function(data){
					if(data == 1){
						var sp = $(".notice_t").get(0).id.substring($(".notice_t").get(0).id.lastIndexOf("s_")+2);	//分割s_符号
						$("#commodity_"+sp).remove();
					}else{
						alert("删除失败");
					}
				});
				CloseDiv_1("MyDiv","fade");
				single();
			});
			
			//删除商品点击取消
			$(".b_buy").click(function(){
				CloseDiv_1("MyDiv","fade");
			});
			
			$(".settlement").click(function(){		//点击结算
				var wz = "";		//所选中商品id	要传入第二个页面					//wz = wz+"-"+s.id;
				for(var i = 0;i<$(".qx").length;i++){
					if($(".qx:eq("+i+")").attr("checked")){
						if(wz == ""){
							wz = $(".qx:eq("+i+")").parent().parent().attr("title");
						}else{
							wz = wz +"-"+ $(".qx:eq("+i+")").parent().parent().attr("title");
						}
					}
				}
				if(wz == ""){
					alert("请选择需要购买的商品");
				}else{
					window.location.href="/EasyBuy/pre/settlement/BuyCar_Two.jsp?&wz="+wz;
				}
				
			});
		});
	</script>
</body>
</html>
